<template>
  <el-row class="Carousel">
    <el-col :span="22" :offset="1">
      <el-carousel type="card" height="400px" :interval="2000" indicator-position="none" id="el-carousel">
        <el-carousel-item v-for="item in 4" :key="item">
          <img :src=" 'static/images/banner' +item+'.jpg' ">
          <!--<img :src=" 'dist/static/images/banner' +item+'.jpg' ">-->
        </el-carousel-item>
      </el-carousel>
    </el-col>
  </el-row>
</template>

<script>
    export default {
      name: "Carousel",
      data() {
        return {
          bannerHeight: 400,
          screenWidth: 1920,
        };
      },
      mounted() {
        this.setSize1();
        const that = this;
        //监听浏览器窗口大小改变
        window.addEventListener('resize', function() {
          var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
          that.screenWidth = width;
          that.setSize();
        }, false);
      },
      methods: {
        setSize1: function() {
          var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
          this.screenWidth = width;
          //图片                高 / 宽  700 / 1920
          this.bannerHeight = 700 / 1920 * this.screenWidth - 50;
          if(document.getElementById('el-carousel'))
            document.getElementById('el-carousel').style.height = this.bannerHeight + 'px';
        },

        setSize: function() {
          this.bannerHeight = 700 / 1920 * this.screenWidth - 50;
          if(document.getElementById('el-carousel'))
            document.getElementById('el-carousel').style.height = this.bannerHeight + 'px';
        },
      },
    }
</script>

<style scoped lang="stylus">
.Carousel
  background-image url(http://up.boohee.cn/house/u/boohee_web/banner/boohee_bg.jpg)
  background-size: 100% 100%
  box-sizing border-box
  padding-top 40px
  .el-carousel
    .el-carousel__container
      height 80% !important
</style>
